<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市县三级联动测试</title>
    <link rel="stylesheet" href="/crm/js/style.css">

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>


</head>
<body>
    <!--省级联动UI start-->
    <div id="app">

        <el-select v-model="value" placeholder="请选择" @change="listCity(value)">
            <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option><!--label是前端显示的选项-->
        </el-select>
        <el-select v-model="value2" placeholder="请选择" @change="listCountry(value2)">
            <el-option
                    v-for="item in citys"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option><!--label是前端显示的选项-->
        </el-select>
        <el-select v-model="value3" placeholder="请选择" >
            <el-option
                    v-for="item in countrys"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option><!--label是前端显示的选项-->
        </el-select>
        <button @click="send(value3)">点击添加</button>
        <input id="msg" type="text" :value="value3">

        <el-select v-model="value4" placeholder="请选择" >
            <el-option
                    v-for="item in countrys"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option><!--label是前端显示的选项-->
        </el-select>

        <el-select v-model="value5" placeholder="请选择" >
            <el-option
                    v-for="item in citys"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option><!--label是前端显示的选项-->
        </el-select>

        <el-select v-model="value6" placeholder="请选择" >
            <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option><!--label是前端显示的选项-->
        </el-select>

    </div>
    <!--省级联动UI end-->
    <div>
        <fieldset>
            <legend>方法一：下拉选择框实现省市区（县）三级联动</legend>
            <form action="#">
                <label for="addr-show">您选择的是：
                    <input type="text" value="" id="addr-show">
                </label>
                <br/>

                <!--省份选择-->
                <select id="prov" onchange="showCity(this)">
                    <option>=请选择省份=</option>

                </select>

                <!--城市选择-->
                <select id="city" onchange="showCountry(this)">
                    <option>=请选择城市=</option>
                </select>

                <!--县区选择-->
                <select id="country" onchange="selecCountry(this)">
                    <option>=请选择县区=</option>
                </select>
                <button type="button" class="btn met1" onClick="showAddr()">确定</button>
            </form>
        </fieldset>
    </div>
    <script src="/crm/js/city.js"></script>
    <script src="/crm/js/method01.js"></script>
<script>
    /*--省级联动js start--*/
    var vm = new Vue({
        el:'#app',
        data:{
                options: '',
                value: '',
                citys:'',
                value3:'',
                value2:'',
                countrys:'',
                value4:''

            },
        created:function(){
            var _self = this
            axios.post('province', {

            })
                .then(function (response) {
                    _self.options = response.data;

                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        methods:{
            send:function (code) {
                alert(code);
            },
            listCity:function (value) {
                var parames =  new URLSearchParams();
                parames.append('areaId',value)
                axios.post('city', parames)
                    .then(function (response) {
                        vm.citys = response.data;

                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                vm.value2='';
                vm.value3='';
                vm.countrys=[];
            },
            listCountry:function (value2) {
                var parames =  new URLSearchParams();
                parames.append('areaId',value2)
                axios.post('country', parames)
                    .then(function (response) {
                        vm.countrys = response.data;

                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                vm.value3='';
            },
            getCountry:function (value3) {
                axios.post('getCountry', {
                    areaId:value3
                })
                    .then(function (response) {
                        console.log(response.data.areaName);
                        vm.value4 = response.data.areaName;

                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
             getCity:function (value2) {
                axios.post('getCity', {
                    areaId:value2
                })
                    .then(function (response) {
                        console.log(response.data.areaName);
                        vm.value5 = response.data.areaName;

                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },

        }

    })
/*-----省级联动js end-----*/
</script>
</body>
</html>